@charset "UTF-8";

/* 处理 字体图标 iconfont 显示问题 */
// :global(.iconfont)
[class^="iconfont"] {
  font-family: 'iconfont' !important;
  font-size: 18px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important;
}

/* 自定义字体集 */
@font-face {
  font-family: 'fzlxtjw';
  font-weight: normal;
  font-style: normal;
  font-display: block; // 解决因网络较差，加载字体失败警告
  src: url('../assets/fonts/fzlxtjw.ttf') format('TrueType'),
    url() format('embedded-opentype'),
    url() format('opentype'),
    url() format('woff'),
    url() format('woff2');
}

/* 隐藏百度地图、高德地图LOGO */
.BMap_cpyCtrl,
.anchorBL,
.amap-logo,
.amap-copyright {
  display: none !important;
}

#amap,
#bmap {
  width: 100%;
  height: 100%;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px #dfdfdf;
}

#nprogress .bar {
  background: linear-gradient(296deg, #5be6ff 0%, #1180ff 100%) !important;
}

/* ------------------------ 自定义滚动条样式 scrollbar ------------------------ */

/* 注意兼容性 - 滚动条外框整体样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 1px;
  // background-color: #eff1ff;
}

/* 滚动条内轨道 */
::-webkit-scrollbar-track {
  // background: rgb(230 230 230 / 100%);
  background-color: transparent;
  // box-shadow: inset 0 0 5px rgba(0 0 0 / 20%);
}

::-webkit-scrollbar-track:hover {
  // background: rgb(230 230 230 / 60%);
}

::-webkit-scrollbar-track:active {
  // background: rgb(230 230 230 / 95%);
}

/* 滚动条内滑块 */
::-webkit-scrollbar-thumb {
  background: #409eff;
  // border: 1px solid #eff1f5;
  border-radius: 200px;
  box-shadow: inset 0 0 3px rgb(0 0 0 / 45%);
  transition: all .3s;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 20%) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 20%) 50%, rgb(255 255 255 / 20%) 75%, transparent 75%, transparent);
}

::-webkit-scrollbar-thumb:hover {
  background: #ff4081;
}

::-webkit-scrollbar-thumb:active {
  background: #81cb82;
}

// ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
// ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
// ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
// ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件


/* ------------------------ input placeholder 样式 ------------------------ */
::-webkit-input-placeholder {
  font-size: 13px !important;
  color: var(--klein-placeholder-color) !important;
  font-family: "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
}

::-moz-placeholder {
  font-size: 13px !important;
  color: var(--klein-placeholder-color) !important;
  font-family: "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
}

::-ms-input-placeholder {
  font-size: 13px !important;
  color: var(--klein-placeholder-color) !important;
  font-family: "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
}

/* ------------------------ 选中样式 selection ------------------------ */
::selection {
  color: var(--klein-color-white);
  background: transparent;
  background-color: var(--primary-theme-back);
}

::-webkit-selection {
  color: var(--klein-color-white);
  background: transparent;
  background-color: var(--primary-theme-back);
}

::-moz-selection {
  color: var(--klein-color-white);
  background: transparent;
  background-color: var(--primary-theme-back);
}

::-ms-selection {
  color: var(--klein-color-white);
  background: transparent;
  background-color: var(--primary-theme-back);
}

/* 单行文本溢出显示 ... */
/* 注：前提父元素有宽度 */
.element-line {
  display: inline-block;
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 文本溢出部分使用 ...代替
  white-space: nowrap; // 不换行
}

/* 多行文本溢出显示 ... */
/* 注：溢出的元素必须是 block/inline-block 元素具有宽度 */
.element-multiline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 超出几行省略
}


// 中英文自动换行
// 只对英文起作用,以字母为换行依据：word-break:break-all;
// 只对英文起作用,以单词为换行依据：word-wrap:break-word;
// white-space:pre-wrap;    white-space:nowrap;

/**
 * 清除浮动 √
 * 添加 class='clearfix'
 */

.clearfix::before,
.clearfix::after {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  clear: both;
  font-size: 0;
  line-height: 0;
  content: '\0020';
  visibility: hidden;
}

// 识别不同版本IE浏览器
// .clearfix {
//   *zoom: 1;
// }

/** 使用滤镜变灰色 */
.fill-grey {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  -moz-filter: grayscale(100%) !important;
  -ms-filter: grayscale(100%) !important;
  -o-filter: grayscale(100%) !important;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

/* 元素水平垂直居中 - flex */
.flexbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 元素水平垂直居中 - position */
.absbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 元素水平垂直居中 - margin */
.autobox {
  position: absolute;
  inset: 0;
  margin: auto;
}